<template>
  <el-row>
    <el-skeleton :loading="loading" animated>
      <el-col :span="6">
        <el-card shadow="never">
          <el-row>
            <el-col :span="12">
              <div class="text-20px text-700"> 办公室数量 </div>
              <div class="mt-10px text-14px text-gray-500"> 空闲数量/总数量 </div>
            </el-col>
            <el-col :span="12" class="text-right mt-3 text-blue-500">
              <div class="text-20px text-700">
                {{ info.officeEmptyTotalCount }}个 / {{ info.officeTotalCount }}个</div
              >
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-row justify="space-between">
            <el-col :span="12">
              <div class="text-20px text-700"> 空置 </div>
              <div class="mt-10px text-14px text-gray-500"> 空置率/空置面积 </div>
            </el-col>
            <el-col :span="12" class="text-right mt-3 text-green-500">
              <div class="text-20px text-700">
                {{ info.officeEmptyRate }}% / {{ info.officeEmptyTotalArea }}m²</div
              >
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="never">
          <el-row justify="space-between">
            <el-col :span="12">
              <div class="text-20px text-700"> 办公人员数量 </div>
              <div class="mt-10px text-14px text-gray-500"> 所有办公人员数量 </div>
            </el-col>
            <el-col :span="12" class="text-right mt-3 text-yellow-500">
              <div class="text-20px text-700"> {{ info.workerTotalCount }}个</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-row justify="space-between">
            <el-col :span="12">
              <div class="text-20px text-700"> 单位数量 </div>
              <div class="mt-10px text-14px text-gray-500"> 所有单位数量 </div>
            </el-col>
            <el-col :span="12" class="text-right mt-3 text-red-500">
              <div class="text-20px text-700"> {{ info.unitTotalCount }}个</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-skeleton>
  </el-row>

  <el-row class="mt-5px" :gutter="20" justify="space-between">
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-5px">
        <el-skeleton :loading="loading" animated>
          <el-row :gutter="20" justify="space-between">
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-10px">
                <el-skeleton :loading="loading" animated>
                  <div>
                    <div class="text-20px text-700"> 办公用房数量 </div>
                    <div class="mt-10px text-14px text-gray-500">
                      共{{ info.spaceTotalCount }}间
                    </div>
                  </div>
                  <Echart :options="officeOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-10px">
                <el-skeleton :loading="loading" animated>
                  <div>
                    <div class="text-20px text-700"> 办公用房面积 </div>
                    <div class="mt-10px text-14px text-gray-500">
                      共{{ info.specTotalArea }}m²
                    </div>
                  </div>
                  <Echart :options="officeAreaOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between">
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-10px">
                <el-skeleton :loading="loading" animated>
                  <div>
                    <div class="text-20px text-700"> 办公人员 </div>
                    <div class="mt-10px text-14px text-gray-500">
                      共{{ info.workerTotalCount }}人
                    </div>
                  </div>
                  <Echart :options="workerOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-10px">
                <el-skeleton :loading="loading" animated>
                  <div>
                    <div class="text-20px text-700"> 单位数量 </div>
                    <div class="mt-10px text-14px text-gray-500">
                      共{{ info.unitTotalCount }}个
                    </div>
                  </div>
                  <Echart :options="unitOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never">
        <template #header>
          <div class="flex justify-between h-3">
            <span>{{ t('workplace.shortcutOperation') }}</span>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
              <div class="flex items-center">
                <Icon :icon="item.icon" class="mr-10px" />
                <el-link type="default" :underline="false" @click="pushRoute(item.path)">
                  {{ item.name }}
                </el-link>
              </div>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts" name="Home">
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import type { Shortcut } from './types'
const { push } = useRouter()
import { officeOptions, workerOptions, officeAreaOptions, unitOptions } from './echarts-data'
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import * as officeSpaceApi from '@/api/office/space'
import * as unitApi from '@/api/unit/unit'
import * as workerApi from '@/api/unit/worker'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
import { OfficeSpaceTypeEnum } from '@/utils/constants'
import { round } from 'lodash-es'

const { t } = useI18n()
const loading = ref(true)
const info = ref({
  officeTotalCount: 0,
  officeEmptyTotalCount: 0,
  officeTotalArea: 0,
  officeEmptyTotalArea: 0,
  officeEmptyRate: 0,
  spaceTotalCount: 0,
  specTotalArea: 0,
  workerTotalCount: 0,
  unitTotalCount: 0
})

// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])
const officeOptionsData = reactive<EChartsOption>(officeOptions) as EChartsOption
const officeAreaOptionsData = reactive<EChartsOption>(officeAreaOptions) as EChartsOption
const workerOptionsData = reactive<EChartsOption>(workerOptions) as EChartsOption
const unitOptionsData = reactive<EChartsOption>(unitOptions) as EChartsOption

const getShortcut = async () => {
  const permissionStore = usePermissionStoreWithOut()
  let data: Shortcut[] = []
  permissionStore.getAddRouters.forEach((route) => {
    route.children?.forEach((child) => {
      if (
        ['OfficeArea', 'OfficeBuilding', 'OfficeSpace', 'Unit', 'UnitWorker'].includes(child.name)
      ) {
        data.push({
          name: child.meta.title,
          icon: child.meta.icon,
          path: route.path + '/' + child.path
        })
      }
    })
  })
  shortcut = Object.assign(shortcut, data)
}

const getOfficeInfo = async () => {
  const data = await officeSpaceApi.getGroupTypeInfo()
  let types: string[] = []
  data.forEach((dataInfo) => {
    types.push(getDictObj(DICT_TYPE.OFFICE_SPACE_TYPE, dataInfo.type).label)
    info.value.spaceTotalCount += dataInfo.count
    info.value.specTotalArea += dataInfo.area
    if (OfficeSpaceTypeEnum.OFFICE == dataInfo.type) {
      info.value.officeTotalArea = dataInfo.area
      info.value.officeEmptyTotalArea = dataInfo.emptyArea
      info.value.officeTotalCount = dataInfo.count
      info.value.officeEmptyTotalCount = dataInfo.emptyCount
      if (info.value.officeTotalArea > 0)
        info.value.officeEmptyRate = round(
          (info.value.officeEmptyTotalArea / info.value.officeTotalArea) * 100,
          2
        )
    }
  })
  set(officeOptionsData, 'xAxis.data', types)
  set(
    officeOptionsData,
    'series.data',
    data.map((v) => v.count)
  )

  set(officeAreaOptionsData, 'legend.data', types)
  officeAreaOptionsData!.series![0].data = data.map((v) => {
    return {
      name: getDictObj(DICT_TYPE.OFFICE_SPACE_TYPE, v.type).label,
      value: v.area
    }
  })
}

const getWorkerInfo = async () => {
  const workerInfos = await workerApi.getGroupRankInfo()
  let rankNames: string[] = []
  workerInfos.forEach((workerInfo) => {
    info.value.workerTotalCount += workerInfo.count
    rankNames.push(workerInfo.rankName)
  })
  set(
    workerOptionsData,
    'xAxis.data',
    workerInfos.map((v) => v.rankName)
  )
  set(
    workerOptionsData,
    'series.data',
    workerInfos.map((v) => v.count)
  )
}

const getUnitInfo = async () => {
  const unitInfos = await unitApi.getGroupCategoryInfo()
  let categorys: string[] = []
  unitInfos.forEach((unitInfo) => {
    info.value.unitTotalCount += unitInfo.count
    categorys.push(
      getDictObj(DICT_TYPE.UNIT_INSTITUTIONAL_CATEGORY, unitInfo.institutionalCategory).label
    )
  })
  set(unitOptionsData, 'legend.data', categorys)
  unitOptionsData!.series![0].data = unitInfos.map((v) => {
    return {
      name: getDictObj(DICT_TYPE.UNIT_INSTITUTIONAL_CATEGORY, v.institutionalCategory).label,
      value: v.count
    }
  })
}

const getAllApi = async () => {
  await Promise.all([getShortcut(), getOfficeInfo(), getWorkerInfo(), getUnitInfo()])
  loading.value = false
}

const pushRoute = (path) => {
  push({ path: path })
}

getAllApi()
</script>
